<template>
<el-dialog :show-close="false" width="60%" top="80px">
  <div class="tableSelect">
    <div class="tableSelect-title">联台</div>
    <div style="padding: 0 4px;">
      <div class="tableSelect-tab">
        <div class="tab-item" :class="{ active: tableSelectActive == k }" v-for="(v, k) in zoneList" :key="k" @click="onChangeTab('allTableSelect', k)">
          <div>{{ v.roomAreaName }}</div>
          <div class="tab-item-bottom" :class="{ active: tableSelectActive == k }"></div>
        </div>
      </div>
    </div>
    <div class="tableSelect-main" @click="onSelectTable">
      <div class="tableSelect-main-item"
           :data-id="k"
           :data-name="v.roomName"
           :data-code="v.roomCode"
           :class="{ active: isTableSelected(v.roomCode) }"
           v-for="(v, k) in tableList"
           :key="k">
        {{ v.roomName }}
      </div>
      <div class="tableSelect-main-item spe" data-type="up" :class="{ canNotUse: postForm.pageIndex == 1 }" @click="onAllChangePage">上页</div>
      <div class="tableSelect-main-item spe" data-type="down" :class="{ canNotUse: tableList.length < postForm.pageSize }" @click="onAllChangePage">下页</div>
    </div>
    <div class="popup-btn" style="padding: 0 4px;">
      <div class="btn-cancle" @click="onCancel">取消</div>
      <div class="btn-submit" @click="onConfirm">确认</div>
    </div>
  </div>
</el-dialog>

</template>
<script setup>
import Api from '@/api'
import dayjs from "dayjs"
import useConfigStore from '@/store/config'
const configStore = useConfigStore()
//  const props = defineProps({
//      consumeCode: {
//          type: String,
//          default: ''
//      },
//      oldRoomCode: {
//          type: String,
//          default: ''
//      },
//      tableSelectShow:{
//        type: Boolean,
//          default: false
//      }
//  });
const emits = defineEmits(['update:show', 'cancel', 'confirm']);
const onCancel = () => {
   emits('update:show');
   emits('cancel');
}

const onConfirm = () => {
  emits('confirm', selectedTables.value)
}


const tableSelectActive = ref(0)
const tabSelActive = ref([[]])  
const selectedTables = ref([])

// 判断桌台是否被选中
const isTableSelected = (code) => {
  return selectedTables.value.some(table => table.code === code);
}

// 房台类型切换
const onChangeTab = (type, k) => {
  if (tableSelectActive.value !== k) {
    postForm.value.pageIndex = 1
    if (tabSelActive.value[tableSelectActive.value] !== undefined) {
      tabSelActive.value[tableSelectActive.value] = [...tabSelActive.value[tableSelectActive.value]];
    }

    tableSelectActive.value = k;
    postForm.value.areaCode = zoneList.value[k].roomAreaCode;
    getTableInfo();

    if (!tabSelActive.value[k]) {
      tabSelActive.value[k] = []; 
    }
  }
}

// 桌台选中切换
const onSelectTable = (e) => {
  const id = e.target.dataset.id
  const name = e.target.dataset.name
  const code = e.target.dataset.code

  if (!isTableSelected(code)) {
    // 选中桌台
    selectedTables.value.push({ id, name, code });
  } else {
    // 取消选中桌台
    selectedTables.value = selectedTables.value.filter(table => table.code !== code);
  }

  console.log(selectedTables.value, '选中桌台信息');
}

// 初始化默认选中第一个桌台
onChangeTab('allTableSelect', 0);

// 所有房台弹窗上下页切换
const onAllChangePage = (e)=>{
if(e.target.dataset.type == 'down'){
  if(tableList.value.length<postForm.value.pageSize){
    return
  }else{
    postForm.value.pageIndex++
  }
  
}else{
  if(postForm.value.pageIndex <= 1){
    return
  }else{
    postForm.value.pageIndex--
  }
}
getTableInfo()
}
// 获取房台
const postForm = ref({
reserveTime:'',
roomState:'0',
pageSize: 23,
pageIndex: 1,
areaCode:''
})
const tableList = ref([])
const getTableInfo =  (flag)=>{
if(flag){
  postForm.value.pageIndex = 1
}
postForm.value.reserveTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
Api.Common.PcObjProcess.Do({"functionName": "GetReserveRoomList","orgCode": "0004","contentData":postForm.value})
.then(res=>{
  if(res.result[0].areaRooms) {
    tableList.value = res.result[0].areaRooms.filter(item => !item.mainRoom);
    console.log(tableList.value,'tableList');
  }
})
}
// ------------------------------------------- 获取房台类型 ----------------------------------------
const zoneList = ref([])
// 获取房台类型
const getTableType = () => {
let newArray = [{ roomAreaCode: '', roomAreaName: '全部' }]
Array.prototype.push.apply(newArray, configStore.roomArea)
zoneList.value = newArray
}
getTableType() // 获取房台类型
getTableInfo() // 获取房台
</script>
<style scoped lang="scss">
.tableSelect{
       white-space: nowrap;
       padding: 36px 52px 20px;
       .tableSelect-title{
           font-family: Microsoft YaHei;
           font-weight: bold;
           font-size: 20px;
           color: #212121;
           line-height: 20px;
           padding: 0 0 32px 8px;
       }
       .tableSelect-tab{
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 0 42px;
           background: #F2F2F2;
           border-radius: 8px;
           // padding-left: 8px;
           .tab-item{
           padding: 15px 0px;
           width:16%;
           text-align:center;
           cursor: pointer;
           position: relative;
           &.active{
               color: #FF6A00;
           }
           .tab-item-bottom{
               position:absolute;
               bottom:4px;
               left: 50%; 
               transform: translateX(-50%); 
               width: 24px;
               height: 2px;
               background-color: #FF6A00;
               border-radius: 1px;
               display:none;
               &.active{
               display:block;
               }
           }
           }
       }
       .tableSelect-main{
           display: flex;
           align-items: center;
           justify-content: start;
           flex-wrap: wrap;
           padding-top: 20px;
           .tableSelect-main-item{
           // flex: 1 0 calc(12.5% - 16px); /* 计算每个子元素的宽度，减去 margin */
           width: calc(12.5% - 16px);
           height: 96px;
           text-align: center;
           font-family: Microsoft YaHei;
           font-weight: bold;
           font-size: 24px;
           color: #212121;
           line-height: 96px;
           margin: 0 8px 16px 8px;
           background: #FFFFFF;
           border-radius: 8px;
           border: 1px solid #E6E6E6;
           cursor: pointer;
           &.spe{
               background: #E6E6E6;
           }
           &.active{
               background: #FFE566;
           }
           &.canNotUse{
               background: #F2F2F2;
               color: #CCCCCC;
           }
           }
       }
       .popup-btn{
               display: flex;
               align-items: center;
               justify-content: center;
               .btn-cancle{
                   text-align: center;
                   font-family: Microsoft YaHei;
                   font-weight: 400;
                   font-size: 24px;
                   color: #FF6A00;
                   line-height: 60px;
                   width: 160px;
                   height: 60px;
                   background: #FFFFFF;
                   border-radius: 8px;
                   border: 1px solid #FF6A00;
                   margin-right: 36px;
                   cursor: pointer;
               }
               .btn-submit{
                   font-family: Microsoft YaHei;
                   font-weight: 400;
                   font-size: 24px;
                   color: #FFFFFF;
                   line-height: 60px;
                   text-align: center;
                   width: 160px;
                   height: 60px;
                   background: #FF6A00;
                   border-radius: 8px;
                   cursor: pointer;
                   }
       }
   }
</style>